<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>场景选择</title>
    <link rel="stylesheet" href="{{asset('css/select.css')}}">
    <!-- Link Swiper's CSS -->
    <!-- <link rel="stylesheet" href="./swiper_source/swiper-bundle.min.css"> -->
    <link rel="stylesheet" href={{asset('css/swiper-bundle.min.css')}}>
    <link rel="stylesheet" href={{asset('iconfont/iconfont.css')}}>
    <style>
        body {
            background-image: url("./images/1920bg.jpg");
        }

        .title {
            color: white;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="content-container">
            <!-- 循环views -->
            <div class="view-container" v-for="(item,index) in views" :key='item.id' @click='enter_view(index)'>
                <img :src='item.src'>
                <p class="title-p">@{{item.name}}</p>
                <!-- 提示正在骑行中 -->
                <div class="riding-tips-container">
                    <i class="iconfont icon-loading"></i>
                    <p class="riding-tips">骑行中</p>
                    <div class="sign-out-container">
                        <!-- 退出图片 -->
                        <img
                        @click.stop='sign_out(index)'
                        class="sign_out_btn" src={{asset('images/sign_out.png')}}>
                    </div>
                </div>

                <!-- 确定退出的遮罩层 -->
                <div class="quit-mask-container">
                    <div>
                        <img src={{asset('images/interrupt.png')}} alt="" class="interrupt-img">
                    </div>
                    <div>确定退出场景吗？</div>
                    <div>
                        <img class="confirm-quit-img" src={{asset('images/confirm.png')}} @click.stop='confirm_quit(index)'>
                        <!-- 取消按钮 -->
                        <img class="cancel-img" src={{asset('images/cancel.png')}} @click.stop='mask_cancel'>
                    </div>
                </div>

            </div>
            <!-- 切换场景时候的遮罩层 最外层 -->
            <div class="mask-container">
                <div class="mask-content-container">
                    <div>
                        <img src={{asset('images/interrupt.png')}} alt="" class="interrupt-img">
                    </div>
                    <div>确定更换场景吗？</div>
                    <div>
                        <img class="confirm-img" src={{asset('images/confirm.png')}}
                            @click.stop='confirm_change(confirm_index)'>
                        <img class="cancel-img" src={{asset('images/cancel.png')}} @click.stop='mask_cancel'>
                    </div>
                </div>
            </div>


            <!-- <div class="view-container" @click="enter_view">
                <img src={{asset('images/01.jpg')}} alt="">
                <p class="title-p">场景二</p>
            </div> -->
            <!-- 敬请期待 -->
            <div class="view-container" v-for='item in not_open_views' :key='item.id'>
                <img src={{asset('images/next.jpg')}}>
            </div>
        </div>
    </div>

</body>
<!-- <script src={{asset('js/swiper-bundle.min.js')}}></script> -->
<script src="{{asset('js/jquery.min.js')}}"></script>
<script src="{{asset('js/vue.min.js')}}"></script>
<script>
    // 扫码进入场景的设备的SID
    var sid = @json($sid);
    console.log(sid, 'sid');
    // 确认弹出层自定下标
    var confirm_index = 0;
    // 当前的场景 -1表示不存在
    var activeView = -1;
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')    //携带csrf_token，否则会返回错误500
        }
    });

    (function () {
        // 取消移动端轮播图
        //判断横竖屏
        $(window).resize(() => {
            let w = $("body").width();
            let h = $("body").height();
            // console.log(w);
            // console.log(h);
            if (w > h) {
                // 横屏
                console.log('heng');
                $('.swiper-container').css('flex-grow', 2)
                $('header').css('display', 'block')
                $('.col-blank').css('display', 'block')
                $('.horizontal-tip-container').css('display', 'none')
            } else {
                // alert("竖屏");
                //    $('header').css('flex-grow',0)
                $('.swiper-container').css('flex-grow', 0)
                $('header').css('display', 'flex')
                $('.col-blank').css('display', 'none')
                $('.horizontal-tip-container').css('display', 'block')
            }
        })
        // 第一次打开网页手动判断
        $(window).resize();
    })()
    var app = new Vue({
        el: '#app',
        data() {
            return {
                sid,
                confirm_index: 0,
                activeView: -1,
                ridingFlag: false,
                // 场景s
                views: [{
                    id: 0,
                    name: '场景一',
                    src: "{{asset('images/01.jpg')}}"
                }, {
                    id: 1,
                    name: '场景二',
                    src: "{{asset('images/01.jpg')}}"
                }],
                not_open_views: [{
                    id: 0,
                }, {
                    id: 1,
                }]
            }
        },
        methods: {
            ajaxReq(msg) {
                console.log(msg, 'ajax');
                // return;
                $.ajax({
                    type: 'POST',
                    url: '/appuser/msg/push',
                    data: {
                        id: sid,
                        msg
                    },
                    success: function (data) {
                        console.log(data, '  success');

                    },
                    error: data => {
                        console.log(data);
                    }
                });
            },
            // 点击，进入场景
            enter_view(index) {
                // console.log(index, this.activeView, 'index,activeView');
                // return;
                if (index === this.activeView) return;
                if (!this.ridingFlag) {
                    // 无人骑车
                    this.activeView = index;
                    this.ridingFlag = true;
                    $('.riding-tips-container').css('display', 'none');
                    $('.riding-tips-container').eq(index).css('display', 'flex');
                    if (index === 0) {
                        this.ajaxReq(20)
                    } else if (index === 1) {
                        this.ajaxReq(21)
                    }
                } else {
                    // 有人骑车
                    // console.log('有人');
                    this.confirm_index = index;
                    $('.mask-container').css('display', 'flex')
                }
            },
            // 点击,退出按钮
            sign_out(i) {
                // console.log(i);
                $('.quit-mask-container').eq(i).css('display','flex')
                return;
                // 弹出对话框
                $('.riding-tips-container').css('display', 'none')
                // 对话框
                $('.quit-mask-container').css('display', 'flex')
            },
            // 点击遮罩层的取消
            mask_cancel() {
                $('.mask-container').css('display', 'none')
                $('.quit-mask-container').css('display', 'none')
            },
            // 确认切换场景
            confirm_change(i) {
                // console.log(i);
                this.activeView = i;
                $('.mask-container').css('display', 'none')
                $('.riding-tips-container').css('display', 'none');
                $('.riding-tips-container').eq(i).css('display', 'flex');
                if (i === 0) {
                    this.ajaxReq(20)
                } else if (i === 1) {
                    this.ajaxReq(21)
                }
            },
            // 确认退出当前场景
            confirm_quit(i){
                // console.log(i);
                this.activeView=-1;
                this.ridingFlag=false;
                $('.quit-mask-container').eq(i).css('display','none')
                $('.riding-tips-container').eq(i).css('display','none')
                this.ajaxReq(100)
            },
        },
    })

</script>

</html>
